<!-- 数据分析 -->
<template lang="html">
  <div class="statisticalBox">
      <el-row class="bg-white">
        <!-- <el-col :span="2" >
          <div :class="productTab==1?'productTab active':'productTab'" @click="tabList(1)">
            产品分析
          </div>
        </el-col> -->
        <el-col :span="2">
          <div :class="productTab==2?'productTab active':'productTab'" @click="tabList(2)">
            交易分析
          </div>
        </el-col>
        <el-col :span="2">
          <div :class="productTab==3?'productTab active':'productTab'" @click="tabList(3)">
            评价分析
          </div>
        </el-col>
        <!-- <el-col :span="2">
          <div :class="productTab==4?'productTab active':'productTab'" @click="tabList(4)">
            客户分析
          </div>
        </el-col> -->
      </el-row>
      <router-view> </router-view>
  </div>
</template>

<script>
export default {
  data(){
    return {
      productTab:1
    }
  },
  methods:{
    tabList:function (n){
      var that = this;
      that.productTab=n;
      switch (n) {
        case 1:
          that.$router.push({path:'/statistical/product'});
          break;
        case 2:
          that.$router.push({path:'/statistical/deal/product'});
          break;
        case 3:
          that.$router.push({path:'/statistical/evaluate/product'});
          break;
        case 4:
          that.$router.push({path:'/statistical/customer'});
          break;
        default:
          break;
      }
    }
  },
  watch:{
    $route:function (){
      var that = this;
      switch (that.$route.path) {
        case '/statistical/deal/product':
          that.productTab=2;
          break;
        case '/statistical/deal/woter':
          that.productTab=2;
          break;
        case '/statistical/deal/verify':
          that.productTab=2;
          break;
        case '/statistical/deal/back':
          that.productTab=2;
          break;
        case '/statistical/evaluate/product':
          that.productTab=3;
          break;
        case '/statistical/evaluate/merchants':
          that.productTab=3;
          break;
        default:
      }
    }

  },
  created(){

    var that = this;
    switch (that.$route.path) {
      case '/statistical/deal/product':
        that.productTab=2;
        break;
      case '/statistical/deal/woter':
        that.productTab=2;
        break;
      case '/statistical/deal/verify':
        that.productTab=2;
        break;
      case '/statistical/deal/back':
        that.productTab=2;
        break;
      case '/statistical/evaluate/product':
        that.productTab=3;
        break;
      case '/statistical/evaluate/merchants':
        that.productTab=3;
        break;
      default:
    }
    this.$store.state.index='8';
  }
}
</script>

<style lang="Sass" scoped>
.statisticalBox{ width: 100%; height: 100%; background: #F7F8FC;

  .productTab{height: 40px; line-height: 40px; margin: 0 20px; box-sizing: border-box; cursor: pointer;}
  .active{border-bottom: 4px solid #13CE66;}
}
</style>
